"use client";
import React, { useState } from "react";
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import Image from "next/image";
import Link from "next/link";
type MenuItem = Required<MenuProps>["items"][number];
import { usePathname, useParams, useRouter } from "next/navigation";

const items: MenuItem[] = [
  {
    label: '首页',
    key: "/",
  },
  {
    label: '新手指南',
    key: "/beginner",
  },
  {
    label: (
      <>
        价格与服务{" "}
        <Image
          className="inline-block mb-1"
          src={"/assets/others/arrow.png"}
          alt=""
          width={20}
          height={20}
        ></Image>
      </>
    ),
    key: "/price-and-service",
    children: [
      {
        label: "运费标准",
        key: "/1",
      },
      {
        label: "会员体系",
        key: "/2",
      },
      {
        label: "增值服务",
        key: "/3",
      },
      {
        label: "转运时效",
        key: "/4",
      },
      {
        label: "分享有礼",
        key: "/5",
      },
    ],
  },
  {
    label: (
      <>
        优惠与导购{" "}
        <Image
          className="inline-block mb-1"
          src={"/assets/others/arrow.png"}
          alt=""
          width={20}
          height={20}
        ></Image>
      </>
    ),
    key: "/shopping-guide",
    children: [
      {
        label: "海淘攻略",
        key: "/strategy",
      },
      {
        label: "海淘导购",
        key: "/guide",
      },
    ],
  },
  {
    key: "/help-center",
    // label: '帮助中心'
    label: <Link href="/help-center">帮助中心</Link>,
  },
];
export default function Navigation({ offset }: { offset: number }) {
  const pathname = usePathname();
  const params = useParams();

  const router = useRouter();
  const _current = `/${pathname.split("/").at(-1)}`;
  const [current, setCurrent] = useState(_current);
  console.log(pathname, _current);

  const onClick: MenuProps["onClick"] = (evt) => {
    const { key, keyPath } = evt;
    const _newKeyPath = `/${keyPath.reverse().join("/")}`;
    console.log("click ", keyPath.reverse().join(""));
    setCurrent(key);
    router.push(keyPath.reverse().join(""));
  };

  return (
    <nav
      className={`fixed z-50 top-0 w-full border-b border-white/20   ${
        offset > 100 ? "bg-white" : ""
      }`}
    >
      <div className={`flex w-[1200px] items-center mx-auto h-[90px] `}>
        <Image
          src={"/assets/imgs/logo.png"}
          className="relative z-10"
          alt=""
          width={270}
          height={80}
        />
        <Menu
          className="w-[740px] bg-transparent px-[72px] border-none text-red"
          expandIcon={
            <Image
              src={"/assets/imgs/logo.png"}
              className="relative z-10"
              alt=""
              width={270}
              height={80}
            />
          }
          onClick={onClick}
          selectedKeys={[current]}
          mode="horizontal"
          items={items}
        />
      </div>
    </nav>
  );
}
